<script lang="ts" setup>
import ImageView from "@/module/image/ImageView.vue";
import {onMounted, ref} from "vue";
import {SetMeal} from "@/dto/Main/SetMeal.ts";
import {SetMealApi} from "@/api/Main/SetMealApi.ts";
import {useStoryStore} from "@/store/admin/Main/StoryStore.ts";
import {Story} from "@/dto/Main/Story.ts";

let setMealList = ref<Array<SetMeal>>([])
let storyList = ref<Array<Story>>([])
const api = ref(new SetMealApi())

onMounted(async ()=>{
    await initSetMeal()
    await initStory()
})

const store = useStoryStore()

async function initSetMeal(){
    let search = new SetMeal()
    search.series = "自然系列"
    let result = await api.value.pageAll(search)
    setMealList.value = result.data?.content ?? []
    if (setMealList.value.length > 4){
        setMealList.value = setMealList.value.splice(0,4);
    }
}

async function initStory(){
    await store.initTableData()
    storyList.value = {...store.getTableData()}
    if (storyList.value.length > 3){
        storyList.value = storyList.value.splice(0,3)
    }
}
</script>

<template>
    <el-row style="margin-top: -20px;">
        <el-col :offset="4" :span="16">
            <el-card>
                <el-row>
                    <el-col class="text_sty" style="margin-top: 70px;" :span="6">
                        <div>
                            <div>
                                <p style="font-size: 20px;color:#4a4a4a;">高圆圆的选择</p>
                            </div>
                            <div style="font-size: 13px;color: #9b9b9b">
                                <p>花点时间</p>
                                <p>明星高圆圆投资的</p>
                                <p>品质鲜花电商品牌</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <img height="300" width="1000" src="@/assets/image/gaoyuanyuan.png">
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>

    <el-row style="margin-top: 50px;">
        <el-col :offset="4" :span="16">
            <el-card>
                <el-row>
                    <el-col :span="6" class="text_sty">
                        <div>
                            <div>
                                <p style="font-size: 20px;color:#4a4a4a;">品质鲜花</p>
                            </div>
                            <div style="font-size: 13px;color: #9b9b9b">
                                <p>精选当季时令鲜花</p>
                                <p>16 道工序 11 次质检</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6" class="text_sty">
                        <div>
                            <div>
                                <p style="font-size: 20px;color:#4a4a4a;">品质鲜花</p>
                            </div>
                            <div style="font-size: 13px;color: #9b9b9b">
                                <p>精选当季时令鲜花</p>
                                <p>16 道工序 11 次质检</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6" class="text_sty">
                        <div>
                            <div>
                                <p style="font-size: 20px;color:#4a4a4a;">品质鲜花</p>
                            </div>
                            <div style="font-size: 13px;color: #9b9b9b">
                                <p>精选当季时令鲜花</p>
                                <p>16 道工序 11 次质检</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6" class="text_sty">
                        <div>
                            <div>
                                <p style="font-size: 20px;color:#4a4a4a;">品质鲜花</p>
                            </div>
                            <div style="font-size: 13px;color: #9b9b9b">
                                <p>精选当季时令鲜花</p>
                                <p>16 道工序 11 次质检</p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>

    <div class="main-img"/>

    <el-row  style="margin-top: -400px;">
        <el-col :span="16" :offset="4">
            <div style="color:#fff;line-height: 10px;">
                <p style="font-size: 25px">鲜花套餐 x Package</p>
                <p style="font-size: 18px">努力的你，值得每周一束花，奖励自己</p>
            </div>
        </el-col>
    </el-row>

    <el-row style="margin-top: 60px;">
        <el-col :span="16" :offset="4">
            <el-row>
                <el-col v-for="set in setMealList" :span="5" :offset="1">
                    <el-card>
                        <div class="florust-img">
                            <image-view width="270" height="270" v-model="set.img"/>
                        </div>
                        <template #footer>
                            <div style="text-align: center">
                                <p style="font-size: 18px">{{set.title}}</p>
                                <p style="font-size: 15px;color:#ff0000;">￥{{set.money}}</p>
                                <hr width="200" color="e4e4e4">
                                <p style="font-size: 12px;color:#8c86aa;">{{set.text}}</p>
                            </div>
                        </template>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

    <div class="a4-img"/>

    <el-row style="margin-top: 20px;">
        <el-col :offset="4" :span="16">
            <div style="color:#4a4a4a;line-height: 10px;">
                <p style="font-size: 25px">鲜花故事 x Story</p>
            </div>
            <el-row  v-for="story in storyList">
                <el-col :span="7" >
                    <el-card>
                        <image-view v-model="story.img" width="370" height="370"/>
                        <template #footer>
                            <el-row  style="margin: 10px 10px 10px 10px;">
                                <el-col :span="12">
                                    <span style="color: #7f898f;font-size: 16px">{{story.name}}</span>
                                </el-col>
                                <el-col :span="12">
                                    <span style="float: right;color: #7f898f;font-size: 16px">{{story.date}}</span>
                                </el-col>
                                <el-col :span="24" style="margin-top: 10px;">
                                    <span style="font-size: 22px;">{{story.title}}</span>
                                </el-col>
                                <el-col :span="24">
                                    <p style="color: #7f898f;font-size: 15px">{{story.text}}</p>
                                </el-col>
                            </el-row>
                        </template>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<style scoped>
.el-card {
    border: 0 !important;
    --el-card-border-radius: 0px !important;
    --el-card-padding: 0 !important;
}

.text_sty {
    text-align: center;
}

.main-img{
    margin-top: -20px;
    height: 500px;
    line-height: 60px;
    background-image: url("@/assets/image/5.png");
    background-size: 100%;
    background-repeat: no-repeat;
    color: #ddd;
    z-index: -1;
}
.florust-img{
    margin-top: -20px;
    height: 270px;
    line-height: 60px;
    background-size: 100%;
    background-repeat: no-repeat;
    color: #ddd;
    z-index: -1;
}

.a4-img{
    margin-top: 50px;
    height: 290px;
    line-height: 60px;
    background-image: url("@/assets/image/bg2.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    color: #ddd;
    z-index: -1;
}
</style>